```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git操作指南：Cherry-pick、Revert和Reset详解</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .section-title {
            position: relative;
            padding-bottom: 0.5rem;
        }
        .section-title:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: linear-gradient(to right, #6e8efb, #a777e3);
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 3.5rem;
            line-height: 1;
            margin: 0 0.5rem 0 0;
            color: #6e8efb;
            font-weight: bold;
        }
        .code-block {
            position: relative;
        }
        .copy-btn {
            position: absolute;
            right: 0.5rem;
            top: 0.5rem;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 4px;
            padding: 0.25rem 0.5rem;
            color: white;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .code-block:hover .copy-btn {
            opacity: 1;
        }
        .nav-link {
            position: relative;
        }
        .nav-link:after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: #a777e3;
            transition: width 0.3s;
        }
        .nav-link:hover:after {
            width: 100%;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="text-xl font-bold text-gray-800 flex items-center">
                        <i class="fas fa-code-branch text-purple-600 mr-2"></i>
                        Git专家指南
                    </div>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#cherry-pick" class="text-gray-700 hover:text-purple-600 transition nav-link">Cherry-pick</a>
                    <a href="#revert" class="text-gray-700 hover:text-purple-600 transition nav-link">Revert</a>
                    <a href="#reset" class="text-gray-700 hover:text-purple-600 transition nav-link">Reset</a>
                    <a href="#comparison" class="text-gray-700 hover:text-purple-600 transition nav-link">对比分析</a>
                </div>
                <div class="md:hidden flex items-center">
                    <button class="text-gray-700">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero 模块 -->
    <div class="hero-gradient text-white py-20">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">掌握Git核心操作</h1>
                    <h2 class="text-2xl md:text-3xl font-semibold mb-6 text-purple-100">Cherry-pick、Revert和Reset详解</h2>
                    <p class="text-lg mb-8 opacity-90">在日常开发中，Git是版本控制的核心工具。掌握这三种高级操作，能显著提升你的开发效率和代码管理能力。</p>
                    <div class="flex space-x-4">
                        <a href="#cherry-pick" class="bg-white text-purple-600 hover:bg-purple-100 px-6 py-3 rounded-full font-medium transition duration-300 transform hover:-translate-y-1 shadow-md">开始学习</a>
                        <a href="#comparison" class="border-2 border-white text-white hover:bg-white hover:text-purple-600 px-6 py-3 rounded-full font-medium transition duration-300">对比分析</a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="w-full max-w-md">
                        <div class="mermaid">
                            graph TD
                            A[Git操作] --> B[Cherry-pick]
                            A --> C[Revert]
                            A --> D[Reset]
                            B --> E[选择性应用提交]
                            C --> F[撤销指定提交]
                            D --> G[回退到指定提交]
                            style A fill:#6e8efb,stroke:#333,stroke-width:2px,color:#fff
                            style B fill:#a777e3,stroke:#333,stroke-width:1px,color:#fff
                            style C fill:#a777e3,stroke:#333,stroke-width:1px,color:#fff
                            style D fill:#a777e3,stroke:#333,stroke-width:1px,color:#fff
                            style E fill:#f5f5f5,stroke:#333,stroke-width:1px,color:#333
                            style F fill:#f5f5f5,stroke:#333,stroke-width:1px,color:#333
                            style G fill:#f5f5f5,stroke:#333,stroke-width:1px,color:#333
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- 引言 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden p-8 mb-12 card-hover">
            <div class="drop-cap">
                在日常的项目开发中，Git是版本控制的核心工具，它帮助团队管理代码版本，确保多人协作时不会出现冲突。在Git的使用中，我们常常会遇到需要回退、撤销或选择性应用某些提交的场景。Cherry-pick、Revert和Reset是三种非常常见且重要的Git操作。掌握它们的使用技巧，对于提高开发效率、确保项目代码的稳定性非常关键。
            </div>
        </div>

        <!-- Cherry-pick 部分 -->
        <section id="cherry-pick" class="mb-20 scroll-mt-20">
            <div class="flex items-center mb-8">
                <div class="bg-purple-100 rounded-full p-3 mr-4">
                    <i class="fas fa-cherries text-purple-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800 section-title">一、Cherry-pick —— 选择性提交</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-purple-600">1.1 Cherry-pick是什么？</h3>
                        <p class="mb-4"><code class="bg-gray-100 px-2 py-1 rounded">git cherry-pick</code>是Git中一个非常强大的命令，它允许我们选择性地将某个提交(ts)应用到当前分支。通常用于从一个分支中挑选某个提交，移植到另一个分支，而不必合并整个分支。</p>
                        <p>例如，假设你在开发<code class="bg-gray-100 px-2 py-1 rounded">feature</code>分支时完成了某些功能，并提交了多个ts，但因为某些原因，你希望把其中一个功能单独拿出来应用到<code class="bg-gray-100 px-2 py-1 rounded">master</code>分支，而不想将所有的ts合并到<code class="bg-gray-100 px-2 py-1 rounded">master</code>。</p>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-purple-600">1.2 使用场景</h3>
                        <p>假设你的团队正在开发一个新功能，但这个功能的某个提交已经在<code class="bg-gray-100 px-2 py-1 rounded">feature</code>分支上完成，你现在需要将这个提交快速地合并到<code class="bg-gray-100 px-2 py-1 rounded">master</code>分支上，避免其他未完成的功能被一起带上去。这个时候，<code class="bg-gray-100 px-2 py-1 rounded">git cherry-pick</code>就显得非常有用。</p>
                        <div class="mt-4 p-4 bg-purple-50 rounded-lg">
                            <div class="flex items-start">
                                <i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
                                <div>
                                    <p class="font-medium">小贴士</p>
                                    <p class="text-sm">Cherry-pick适合用于将单个或少量提交从一个分支应用到另一个分支，而不想引入整个分支的所有变更。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-purple-600">1.3 如何使用Cherry-pick</h3>
                        <div class="space-y-4">
                            <div class="flex items-start">
                                <div class="bg-purple-600 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1 mr-3">1</div>
                                <p>首先，切换到你想将ts应用到的分支，通常是<code class="bg-gray-100 px-2 py-1 rounded">master</code>分支：</p>
                            </div>
                            <div class="code-block bg-gray-800 text-gray-100 p-4 rounded-lg relative">
                                <button class="copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button>
                                <pre><code>git checkout master</code></pre>
                            </div>

                            <div class="flex items-start">
                                <div class="bg-purple-600 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1 mr-3">2</div>
                                <p>然后，执行cherry-pick命令，后面跟上要应用的ts的哈希值：</p>
                            </div>
                            <div class="code-block bg-gray-800 text-gray-100 p-4 rounded-lg relative">
                                <button class="copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button>
                                <pre><code>git cherry-pick &lt;commit-hash&gt;</code></pre>
                            </div>

                            <div class="flex items-start">
                                <div class="bg-purple-600 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1 mr-3">3</div>
                                <p>Git会自动将该ts提取并应用到当前分支。如果没有冲突，cherry-pick会成功完成。如果有冲突，你需要手动解决冲突，然后执行以下命令来完成cherry-pick：</p>
                            </div>
                            <div class="code-block bg-gray-800 text-gray-100 p-4 rounded-lg relative">
                                <button class="copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button>
                                <pre><code>git cherry-pick --continue</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-purple-600">1.4 实际案例</h3>
                        <p>假设你有一个<code class="bg-gray-100 px-2 py-1 rounded">feature</code>分支，它有以下ts：</p>
                        <div class="code-block bg-gray-800 text-gray-100 p-4 rounded-lg mt-4 relative">
                            <button class="copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button>
                            <pre><code>1234567 - 完成用户登录功能
2345678 - 完成支付功能
3456789 - 修复登录模块的bug
4567890 - 完成用户注册功能</code></pre>
                        </div>
                        <p class="mt-4">现在，你想将<code class="bg-gray-100 px-2 py-1 rounded">修复登录模块的bug</code>这一个提交合并到<code class="bg-gray-100 px-2 py-1 rounded">master</code>分支。首先，切换到<code class="bg-gray-100 px-2 py-1 rounded">master</code>分支并执行以下命令：</p>
                        <div class="code-block bg-gray-800 text-gray-100 p-4 rounded-lg mt-4 relative">
                            <button class="copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button>
                            <pre><code>git checkout master
git cherry-pick 3456789</code></pre>
                        </div>
                        <p class="mt-4">通过这种方式，你只会将<code class="bg-gray-100 px-2 py-1 rounded">3456789</code>这个ts合并到<code class="bg-gray-100 px-2 py-1 rounded">master</code>，而其他的提交则不会影响<code class="bg-gray-100 px-2 py-1 rounded">master</code>。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Revert 部分 -->
        <section id="revert" class="mb-20 scroll-mt-20">
            <div class="flex items-center mb-8">
                <div class="bg-blue-100 rounded-full p-3 mr-4">
                    <i class="fas fa-undo text-blue-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800 section-title">二、Revert —— 撤销指定提交</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-blue-600">2.1 Revert是什么？</h3>
                        <p class="mb-4"><code class="bg-gray-100 px-2 py-1 rounded">git revert</code>用于撤销某个提交的影响，它通过创建一个新的ts来反向应用指定ts的变更，从而恢复到之前的状态。与<code class="bg-gray-100 px-2 py-1 rounded">git reset</code>不同，<code class="bg-gray-100 px-2 py-1 rounded">git revert</code>并不会改变Git历史，只会生成一个新的ts来撤销之前的修改。</p>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-blue-600">2.2 使用场景</h3>
                        <p>当你发现某个功能或bug修复引入了问题，但又不想直接删除这些提交历史时，<code class="bg-gray-100 px-2 py-1 rounded">git revert</code>就非常有用。它可以撤销错误的提交，并在Git历史中保留相关记录。</p>
                        <div class="mt-4 p-4 bg-blue-50 rounded-lg">
                            <div class="flex items-start">
                                <i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2"></i>
                                <div>
                                    <p class="font-medium">重要区别</p>
                                    <p class="text-sm">Revert会创建一个新提交来撤销更改，而Reset会直接修改历史。在团队协作中，Revert通常更安全。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-blue-600">2.3 如何使用Revert</h3>
                        <div class="space-y-4">
                            <div class="flex items-start">
                                <div class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1 mr-3">1</div>
                                <p>首先，找到你需要撤销的提交的哈希值。</p>
                            </div>

                            <div class="flex items-start">
                                <div class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1 mr-3">2</div>
                                <p>然后，执行<code class="bg-gray-100 px-2 py-1 rounded">git revert</code>命令，撤销该提交：</p>
                            </div>
                            <div class="code-block bg-gray-800 text-gray-100 p-4 rounded-lg relative">
                                <button class="copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button>
                                <pre><code>git revert &lt;commit-hash&gt;</code></pre>
                            </div>

                            <div class="flex items-start">
                                <div class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1 mr-3">3</div>
                                <p>Git会自动生成一个新的提交，这个提交会撤销目标提交的修改。如果没有冲突，撤销过程会自动完成。如果有冲突，你需要解决冲突后继续执行：</p>
                            </div>
                            <div class="code-block bg-gray-800 text-gray-100 p-4 rounded-lg relative">
                                <button class="copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button>
                                <pre><code>git revert --continue</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-blue-600">2.4 实际案例</h3>
                        <p>假设你在<code class="bg-gray-100 px-2 py-1 rounded">master</code>分支上合并了一个提交，该提交引入了一个bug，现在你需要撤销这个提交。</p>
                        <div class="code-block bg-gray-800 text-gray-100 p-4 rounded-lg mt-4 relative">
                            <button class="copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button>
                            <pre><code>1234567 - 完成支付功能
2345678 - 修复支付功能的 bug</code></pre>
                        </div>
                        <p class="mt-4">如果你想撤销<code class="bg-gray-100 px-2 py-1 rounded">2345678</code>这个提交，执行以下命令：</p>
                        <div class="code-block bg-gray-800 text-gray-100 p-4 rounded-lg mt-4 relative">
                            <button class="copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button>
                            <pre><code>git revert 2345678</code></pre>
                        </div>
                        <p class="mt-4">这时，Git会自动生成一个新的提交，该提交的作用是撤销<code class="bg-gray-100 px-2 py-1 rounded">2345678</code>这个提交的内容，并且<code class="bg-gray-100 px-2 py-1 rounded">git log</code>中会看到这一记录。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Reset 部分 -->
        <section id="reset" class="mb-20 scroll-mt-20">
            <div class="flex items-center mb-8">
                <div class="bg-red-100 rounded-full p-3 mr-4">
                    <i class="fas fa-history text-red-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800 section-title">三、Reset —— 回退到指定提交</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-red-600">3.1 Reset是什么？</h3>
                        <p class="mb-4"><code class="bg-gray-100 px-2 py-1 rounded">git reset</code>是Git中一个比较"危险"的命令，它可以回退到某个指定的提交。<code class="bg-gray-100 px-2 py-1 rounded">git reset</code>会根据不同的选项，对工作区、暂存区以及本地分支的历史进行不同程度的修改。</p>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-red-600">3.2 使用场景</h3>
                        <p><code class="bg-gray-100 px-2 py-1 rounded">git reset</code>通常用于在本地开发时，如果你想彻底回到某个提交时的状态，可以用它来删除某些错误的提交。<code class="bg-gray-100 px-2 py-1 rounded">git reset</code>比<code class="bg-gray-100 px-2 py-1 rounded">git revert</code>更加彻底，它不仅仅会撤销某个提交的变更，还会改变Git历史。</p>
                        <div class="mt-4 p-4 bg-red-50 rounded-lg">
                            <div class="flex items-start">
                                <i class="fas fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                                <div>
                                    <p class="font-medium">警告</p>
                                    <p class="text-sm">Reset会重写提交历史，如果在团队协作中使用不当，可能会导致严重问题。谨慎使用！</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-red-600">3.3 Reset的常用选项</h3>
                        <div class="space-y-4">
                            <div class="flex items-start">
                                <div class="bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1 mr-3"></div>
                                <div>
                                    <p><span class="font-semibold">--soft</span>：仅修改HEAD，保留暂存区和工作区的内容。常用于需要撤销提交，但不想修改文件内容的情况。</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1 mr-3"></div>
                                <div>
                                    <p><span class="font-semibold">--mixed</span>（默认选项）：修改HEAD和暂存区内容，保留工作区内容。常用于撤销提交并且不想保留暂存区内容。</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1 mr-3"></div>
                                <div>
                                    <p><span class="font-semibold">--hard</span>：修改HEAD、暂存区和工作区，完全回到指定的提交状态。慎用，可能会丢失工作区的修改。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-red-600">3.4 如何使用Reset</h3>
                        <div class="space-y-4">
                            <div class="flex items-start">
                                <div class="bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1 mr-3">1</div>
                                <p>查看Git日志，找到要回退到的ts：</p>
                            </div>
                            <div class="code-block bg-gray-800 text-gray-100 p-4 rounded-lg relative">
                                <button class="copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button>
                                <pre><code>git log</code></pre>
                            </div>

                            <div class="flex items-start">
                                <div class="bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1 mr-3">2</div>
                                <p>执行<code class="bg-gray-100 px-2 py-1 rounded">git reset</code>命令，根据你的需求选择合适的选项：</p>
                            </div>
                            <div class="code-block bg-gray-800 text-gray-100 p-4 rounded-lg relative">
                                <button class="copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button>
                                <pre><code>git reset --soft &lt;commit-hash&gt;  # 回到指定提交，保留更改
git reset --mixed &lt;commit-hash&gt; # 回到指定提交，丢弃暂存区更改
git reset --hard &lt;commit-hash&gt;  # 回到指定提交，丢弃所有更改</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-red-600">3.5 实际案例</h3>
                        <p>假设你提交了几个ts，但你发现最近的两个提交有问题。你想将代码回退到<code class="bg-gray-100 px-2 py-1 rounded">1234567</code>之前的状态。</p>
                        <div class="code-block bg-gray-800 text-gray-100 p-4 rounded-lg mt-4 relative">
                            <button class="copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button>
                            <pre><code>1234567 - 完成支付功能
2345678 - 修复支付功能的 bug
3456789 - 增加支付功能的验证
4567890 - 完善支付功能</code></pre>
                        </div>
                        <p class="mt-4">你可以使用<code class="bg-gray-100 px-2 py-1 rounded">git reset</code>来回退到<code class="bg-gray-100 px-2 py-1 rounded">1234567</code>，并选择是否保留工作区或暂存区的修改：</p>
                        <div class="code-block bg-gray-800 text-gray-100 p-4 rounded-lg mt-4 relative">
                            <button class="copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button>
                            <pre><code>git reset --hard 1234567</code></pre>
                        </div>
                        <p class="mt-4">这将丢弃<code class="bg-gray-100 px-2 py-1 rounded">2345678</code>之后的所有提交，并使你的代码完全回到<code class="bg-gray-100 px-2 py-1 rounded">1234567</code>的状态。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 对比分析部分 -->
        <section id="comparison" class="mb-20 scroll-mt-20">
            <div class="flex items-center mb-8">
                <div class="bg-yellow-100 rounded-full p-3 mr-4">
                    <i class="fas fa-balance-scale text-yellow-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800 section-title">对比分析：Cherry-pick、Revert和Reset</h2>
            </div>

            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="p-6">
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">特性</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cherry-pick</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Revert</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reset</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">是否改变历史</td>
                                    <td class="px-6 py-4 whitespace-nowrap">添加新提交</td>
                                    <td class="px-6 py-4 whitespace-nowrap">添加新提交</td>
                                    <td class="px-6 py-4 whitespace-nowrap">修改历史</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">适用场景</td>
                                    <td class="px-6 py-4 whitespace-nowrap">选择性应用某个提交</td>
                                    <td class="px-6 py-4 whitespace-nowrap">撤销某个提交但不删除历史</td>
                                    <td class="px-6 py-4 whitespace-nowrap">彻底回退到某个提交</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">安全性</td>
                                    <td class="px-6 py-4 whitespace-nowrap">高</td>
                                    <td class="px-6 py-4 whitespace-nowrap">高</td>
                                    <td class="px-6 py-4 whitespace-nowrap">低(可能丢失工作)</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">团队协作</td>
                                    <td class="px-6 py-4 whitespace-nowrap">安全</td>
                                    <td class="px-6 py-4 whitespace-nowrap">安全</td>
                                    <td class="px-6 py-4 whitespace-nowrap">不安全(除非本地分支)</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">冲突可能性</td>
                                    <td class="px-6 py-4 whitespace-nowrap">高</td>
                                    <td class="px-6 py-4 whitespace-nowrap">中</td>
                                    <td class="px-6 py-4 whitespace-nowrap">无</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-8">
                        <div class="mermaid">
                            flowchart TD
                            A[需要修改Git历史?] -->|是| B[是否需要完全删除提交?]
                            A -->|否| C[需要选择性应用提交?]
                            B -->|是| D[使用git reset]
                            B -->|否| E[使用git revert]
                            C -->|是| F[使用git cherry-pick]
                            C -->|否| G[不需要特殊操作]
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-gray-300 py-12">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <h3 class="text-xl font-bold text-white mb-2">技术小馆</h3>
                    <a href="http://www.yuque.com/jtostring" class="text-gray-400 hover:text-white transition">http://www.yuque.com/jtostring</a>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github text-xl"></i></a>
                    <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
                    <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin text-xl"></i></a>
                </div>
            </div>
            <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
                &copy; 2023 技术小馆. 保留所有权利.
            </div>
        </div>
    </footer>

    <script>
        // 初始化Mermaid图表
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });

        // 复制代码功能
        function copyToClipboard(button) {
            const codeBlock = button.parentElement;
            const code = codeBlock.querySelector('code').innerText;
            navigator.clipboard.writeText(code).then(() => {
                button.innerHTML = '<i class="fas fa-check"></i>';
                setTimeout(() => {
                    button.innerHTML = '<i class="fas fa-copy"></i>';
                }, 2000);
            });
        }

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // 滚动时显示导航栏阴影
        window.addEventListener('scroll', function() {
            const nav = document.querySelector('nav');
            if (window.scrollY > 10) {
                nav.classList.add('shadow-md');
                nav.classList.remove('shadow-sm');
            } else {
                nav.classList.remove('shadow-md');
                nav.classList.add('shadow-sm');
            }
        });
    </script>
</body>
</html>
```